import React, { useEffect, useState } from 'react';
import { Modal, Row, Col, Form, notification, Slider } from 'antd';
import Draggable from 'react-draggable';
import Cephalogram from './components/Cephalogram';
import FormCondition from '@/components/FormCondition';
import './index.less'
const ContainerModal = ({ visible = {}, onClose, dispatch, goodsDetails = {}, reload }) => {
  const { show = false, detail } = visible
  const { id, goodsType } = goodsDetails
  useEffect(() => {
    if (show) {
      if (detail) {
        const { profilePosition, qrCodePosition } = detail
        setUploadStyle({ ...detail, profilePosition: JSON.parse(profilePosition), qrCodePosition: JSON.parse(qrCodePosition), })
        setDefaultPosition({
          profilePosition: JSON.parse(profilePosition), qrCodePosition: JSON.parse(qrCodePosition),
        })
      }

    }
    else {
      setAvatarPosition({ x: 0, y: 0 })
      setQrCodePosition({ x: 0, y: 0 })
      setUploadStyle({
        profileStyle: '1',
        qrCodeStyle: '1',
        nicknameColor: 'black',
        showGoods: '1',
        showPrice: '1',
        opacity: 1,
        profilePosition: {},
        qrCodePosition: {}
      })
      setDefaultPosition({
        profilePosition: {},
        qrCodePosition: {}
      })
    }
  }, [show])
  const [form] = Form.useForm();
  const [avatarPosition, setAvatarPosition] = useState({ x: 0, y: 0 });
  const [qrCodePosition, setQrCodePosition] = useState({ x: 0, y: 0 });
  const [defaultPosition, setDefaultPosition] = useState({
    profilePosition: {

    },
    qrCodePosition: {}
  });
  const [uploadStyle, setUploadStyle] = useState({
    profileStyle: '1',
    qrCodeStyle: '1',
    nicknameColor: 'black',
    showGoods: '1',
    showPrice: '1',
    profilePosition: {},
    qrCodePosition: {},
    opacity: 1,
  })
  const { bgImage = '', profileStyle, qrCodeStyle, showPrice, showGoods, nicknameColor, posterId, opacity } = uploadStyle
  const defaultProfileOne = {
    top: defaultPosition.profilePosition.y || 19,
    left: defaultPosition.profilePosition.x || 86,
  }
  const defaultProfileTwo = {
    top: defaultPosition.profilePosition.y || 12,
    left: defaultPosition.profilePosition.x || 20,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',

  }
  const defaultCodeStyle = {
    top: defaultPosition.qrCodePosition.y || 306,
    left: defaultPosition.qrCodePosition.x || 142,
  }
  const handleAvatarDrag = (e, data) => {
    const containerRect = e.target.parentNode.getBoundingClientRect();
    const avatarRect = e.target.getBoundingClientRect();
    const leftOffset = avatarRect.left - containerRect.left;
    const topOffset = avatarRect.top - containerRect.top;
    setUploadStyle({
      ...uploadStyle,
      profilePosition: { x: parseInt(leftOffset), y: parseInt(topOffset) }
    })
    setAvatarPosition({ x: parseInt(data.x), y: parseInt(data.y) });

  };
  const handleQrCodeDrag = (e, data) => {
    const containerRect = e.target.parentNode.getBoundingClientRect();
    const qrCodeRect = e.target.getBoundingClientRect();
    const leftOffset = qrCodeRect.left - containerRect.left;
    const topOffset = qrCodeRect.top - containerRect.top;
    setUploadStyle({
      ...uploadStyle,
      qrCodePosition: { x: parseInt(leftOffset), y: parseInt(topOffset) }
    })
    setQrCodePosition({ x: parseInt(data.x), y: parseInt(data.y) });
  }
  const handeleSubmit = () => {
    if (!bgImage) {
      return notification.warning({
        message: '错误提示',
        description: `请先设置背景图片`,
      });
    }
    form.validateFields().then(async (values) => {
      const { profilePosition, qrCodePosition } = uploadStyle
      const defaultStyle1Profile = {
        y: 19,
        x: 86
      }
      const defaultStyle2Profile = {
        x: 20,
        y: 12
      }
      const defaultqrCodePosition = {
        x: 142,
        y: 306
      }
      dispatch({
        type: 'behaviorEecord/fakeSavePoster',
        payload: {
          ...values,
          ...uploadStyle,
          profilePosition: JSON.stringify(profilePosition.x ? profilePosition : profileStyle === '1' ? defaultStyle1Profile : defaultStyle2Profile),
          qrCodePosition: JSON.stringify(qrCodePosition.x ? qrCodePosition : defaultqrCodePosition),
          goodsId: id,
          id: posterId
        },
        callback: () => {
          reload && reload()
          onClose()
        }
      })
    })
  }
  const renderStyle = profileStyle === '1' ? defaultProfileOne : defaultProfileTwo
  const formItems = [

    {
      type: 'noForm',
      formItem: <Cephalogram src={bgImage} onChange={(e) => {
        console.log(e)
        const { src } = e
        setUploadStyle({
          ...uploadStyle,
          bgImage: src
        })
      }}></Cephalogram>
    },
    {
      label: '头像昵称',
      type: 'radio',
      name: 'profileStyle',
      onChange: (e) => {
        setUploadStyle({
          ...uploadStyle,
          profilePosition: {},
          profileStyle: e.target.value
        })
        setDefaultPosition({ ...defaultPosition, profilePosition: {}, })
        setAvatarPosition({
          x: 0, y: 0
        })

      },
      select: {
        1: '样式一',
        2: '样式二',
        0: '不展示',
      },
    },
    {
      label: '昵称颜色',
      type: 'radio',
      name: 'nicknameColor',
      onChange: (e) => {
        setUploadStyle({
          ...uploadStyle,
          nicknameColor: e.target.value
        })
      },
      select: {
        'white': '白色',
        'black': '黑色',
      },
    },
    {
      label: '商品内容',
      name: 'showGoods',
      type: 'radio',
      onChange: (e) => {
        setUploadStyle({
          ...uploadStyle,

          showGoods: e.target.value
        })
      },
      select: {
        1: '展示',
        0: '不展示',
      },
    },
    {
      label: '商品价格',
      name: 'showPrice',
      onChange: (e) => {
        setUploadStyle({
          ...uploadStyle,
          showPrice: e.target.value
        })
      },
      type: 'radio',
      select: {
        1: '展示',
        0: '不展示',
      },
    },
    {
      label: '二维码样式',
      type: 'radio',
      name: 'qrCodeStyle',
      onChange: (e) => {
        setUploadStyle({
          ...uploadStyle,
          qrCodePosition: {},
          qrCodeStyle: e.target.value
        })
        setDefaultPosition({ ...defaultPosition, qrCodePosition: {}, })
        setQrCodePosition({
          x: 0, y: 0
        })
      },

      select: {
        1: '展示',
        0: '不展示',
      },
    },

    {
      type: 'noForm',
      formItem: <div>
        <div style={{
          marginLeft: 8
        }}>
          商品透明度<span style={{
            color: '#e64340',

          }}></span>
        </div>
        <div style={{ marginLeft: 8 }} span={12}>
          <Slider min={0}
            max={1}
            range={false}
            step={0.1}
            onChange={(e) => {
              setUploadStyle({
                ...uploadStyle,
                opacity: e
              })
            }} value={opacity}></Slider>
        </div>

      </div>
    },
  ];
  return (
    <Modal
      title="分享>海报设置>编辑海报"
      visible={show}
      width={800}
      onCancel={onClose}
      onOk={handeleSubmit}
      destroyOnClose={true}
    >
      <Row>
        <Col span={12}>
          <div
            className='code_box'
            style={{
              position: 'relative',
              width: 220,
              height: 390,
              border: '1px solid #ccc',
              background: bgImage ? `url(${bgImage}) no-repeat center/cover` : '#e1f3d8'
            }}
          >
            {profileStyle === '0' ? null :
              <Draggable
                bounds="parent"
                onDrag={handleAvatarDrag}
                position={avatarPosition}
              >
                <div
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    zIndex: 10,
                    textAlign: 'center',
                    ...renderStyle,
                  }}
                >

                  <img src="http://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/84b7cbf2215669abf105275b59df16f1.png"
                    className="cell cell_img"
                  />
                  <div className="cell nickname nickname__black">
                    <div className="font-body-user" >
                      <div className="small-size" style={{ paddingTop: profileStyle === '1' ? 5 : 0, color: nicknameColor, marginLeft: profileStyle === '2' ? 4 : 0 }}>
                        用户昵称
                      </div>
                    </div>
                  </div>
                </div>

              </Draggable>}

            {showGoods === '1' &&
              <div style={{ opacity: opacity }} className='goods-info'>
                <div className='goods-info_image'></div>
                <div className='goods-info_detail'>
                  <div className='goods-info_name'>商品名称</div>
                  {showPrice === '1' && <div className="goods-info-price">
                    ￥商品价格
                  </div>}
                </div>
              </div>}
            {/* {showGoods === '1' && <div className="goods-info">
              <div>
                <div className="goods-info-img">
                  <img src="http://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/9ed6644ff822ebb17625b89250a96679.png" alt="" className="goods-info-img-img" />
                </div>
                <div className="goods-info-title">
                  {showPrice === '1' && <div className="goods-info-price">
                    ￥
                    <span className="price-number">商品价格</span>
                  </div>}
                  <div className="goods-info-title-text">商品标题</div>
                </div>
              </div>

            </div>} */}
            {qrCodeStyle === '1' && <Draggable
              bounds="parent"
              onDrag={handleQrCodeDrag}
              position={qrCodePosition}
            >
              <div
                style={{
                  position: 'absolute',
                  bottom: 0,
                  left: 0,
                  width: '58px', height: '58px',
                  zIndex: 10,
                  ...defaultCodeStyle
                }}
              >
                <img style={{ width: '58px', height: '58px', left: 0 }} className="code_image" src='https://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/b_u_5b2225aa46488_oGKN7IvA/ktwe7egh0irx.png' />
              </div>
            </Draggable>}
          </div>
        </Col>
        <Col style={{}} span={12}>
          <FormCondition form={form} formItems={formItems} initialValues={uploadStyle}></FormCondition>
          {/* */}
        </Col>
      </Row>
    </Modal>
  );
};

export default ContainerModal;